<template>
	<view class="">
		<u-toast ref="uToast" />
		<view class="">
			<u-navbar :background="background" back-icon-color="#ffffff" :custom-back="customBackUrl">
				<view class="slot-wrap u-font-bold-500 fontColor">
					{{info.title}}
				</view>
			</u-navbar>
			<view class="title u-text-center u-m-t-20">{{info.title}}</view>
			<view class="u-flex u-row-between u-tips-color u-m-20 u-font-12">
				<text class="">
					来源-{{info.source}}
				</text>
				<text class="">
					{{info.createTime}}
				</text>
				<view class="">
					<u-icon name="eye" :label="read" label-color="u-tips-color"></u-icon>
				</view>
			</view>
			<view class="u-content u-m-20">
				<u-parse :html="content" :lazy-load="true" :selectable="true"></u-parse>
			</view>
			<view class="u-m-20 u-tips-color u-font-10">
				本文转载至<{{ info.source }}>，
					<text @tap="copyText(info.url)" class="copyTextInfo">点此可查看原文链接。</text>
					如有侵权，请联系我们，我们将在最短的时间内处理。
			</view>
			<view class="u-flex u-row-between u-tips-color">
				<view class="u-m-l-20 u-font-10">
					分享:
				</view>
				<view class="">
					<button open-type="share" @click="shareWeChatFriends">
						<u-icon name="https://account-book-cos.1900shop.online/static/images/detail/微信.png"
							color="#19be6b" size="50"></u-icon>
					</button>
				</view>
				<view class="">
					<button @click="shareWeChatFriendsCircle">
						<u-icon name="https://account-book-cos.1900shop.online/static/images/detail/朋友圈.png"
							color="#19be6b" size="50"></u-icon>
					</button>
				</view>
				<view class="">
					<button @click="goReLaunchIndexUrl">
						<u-icon name="https://account-book-cos.1900shop.online/static/images/detail/币迹.png" size="50"
							label="点击进入小程序<币迹>" label-size="15"></u-icon>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				info: '',
				read: '0',
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				content: '',
				openSoure: ''
			};
		},
		onShow() {},
		onLoad(e) {
			_this = this;
			console.log("信息" + JSON.stringify(e))
			_this.info = e
			_this.read = e.read
			_this.getDetailMessageInfo()
		},
		methods: {
			//自定义按钮返回信息
			customBackUrl() {
				console.log("自定义按钮返回信息")
				//关闭所有的页面，打开某个页面
				if (_this.os_token) {
					_this.goReLaunchUrl('/pages/app/skill/skill')
				} else {
					_this.goReLaunchUrl('/pages/user/login')
				}
			},
			//关闭所有的页面，打开某个页面
			goReLaunchUrl(url) {
				uni.reLaunch({
					url: url
				});
			},
			//进入小程序首页
			goReLaunchIndexUrl() {
				uni.reLaunch({
					url: '/pages/app/index'
				});
			},
			//按钮是否分享微信朋友
			shareWeChatFriends() {
				console.log("分享跳转")
				_this.$u.mpShare = {
					title: _this.info.title,
					path: '/pages/app/skill/detail?' + 'listId=' + _this.info.listId + "&title=" + _this.info.title +
						"&source=" +
						_this.info.source +
						"&createTime=" + _this.info.createTime + "&url=" + _this.info.url + "&read=" + _this.info
						.read + "&image=" +
						_this.info.image,
					imageUrl: _this.info.image
				}
			},
			//按钮是否分享微信朋友圈
			shareWeChatFriendsCircle() {
				this.$refs.uToast.show({
					title: '点击右上角三个点进行朋友圈分享',
					type: 'warning',
					duration: '3000'
				})
			},
			// 发送给朋友
			onShareAppMessage(res) {
				return {
					title: _this.info.title,
					path: '/pages/app/skill/detail?' + 'listId=' + _this.info.listId + "&title=" + _this.info.title +
						"&source=" +
						_this.info.source +
						"&createTime=" + _this.info.createTime + "&url=" + _this.info.url + "&read=" + _this.info
						.read + "&image=" +
						_this.info.image,
					imageUrl: _this.info.image
				}
			},
			//分享到朋友圈
			onShareTimeline() {
				return {
					title: _this.info.title,
					path: '/pages/app/skill/detail?' + 'listId=' + _this.info.listId + "&title=" + _this.info.title +
						"&source=" +
						_this.info.source +
						"&createTime=" + _this.info.createTime + "&url=" + _this.info.url + "&read=" + _this.info
						.read + "&image=" +
						_this.info.image,
					imageUrl: _this.info.image
				}
			},
			//复制链接
			copyText(url) {
				uni.showModal({
					content: url,
					confirmText: '复制内容',
					success: () => {
						uni.setClipboardData({
							data: url,
							success: function() {
								uni.hideToast({
									title: '复制成功',
									duration: 2000,
									icon: 'none'
								});
							},
							fail: function(err) {
								uni.showToast({
									title: '复制失败',
									duration: 2000,
									icon: 'none'
								});
							}
						});
					}
				});
			},
			//获取列表详情
			async getDetailMessageInfo() {
				await _this.$u.api.getDetailMessage({
					listId: _this.info.listId
				}).then((res) => {
					console.log("getDetailMessage" + JSON.stringify(res))
					if (res) {
						_this.content = res.content
					}
				}).catch(() => {
					uni.hideLoading()
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	button {
		border: none;
		outline: none;
		border-style: none;
		background-color: #FFFFFF;
		color: #000000;
		box-shadow: none;
	}

	button:after {
		border: none;
		border-style: none;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.fontColor {
		color: #ffffff
	}

	.customStyle {}

	.title {
		font-size: 45rpx;
		color: #262626;
		line-height: 70rpx;
		font-weight: bold;
	}

	.copyTextInfo {
		color: $u-content-color
	}

	.u-content {
		margin-top: 100rpx;
		color: $u-content-color;
		font-size: 32rpx;
		line-height: 1.8;

		// 标签形式无效
		p {
			color: $u-tips-color;
		}
	}
</style>